<template>
	<view class="home-container">
		<!-- 搜索区域 -->
		<view class="search-section">
			<view class="search-box">
				<input 
					type="text"
					v-model="searchText"
					placeholder="请输入仪表盘名称"
					class="search-input"
					@input="onSearch"
				/>
				<image 
					v-if="searchText"
					src="/static/images/clear.svg" 
					class="clear-icon" 
					mode="aspectFit"
					@tap="clearSearch"
				></image>
			</view>
		</view>

		<!-- 使用下拉刷新组件 -->
		<scroll-view 
			class="scroll-container"
			scroll-y="true"
			@scrolltolower="loadMore"
			@refresherrefresh="onRefresh"
			:refresher-enabled="true"
			:refresher-triggered="isRefreshing"
		>
			<!-- 当没有数据时显示空状态 -->
			<view v-if="cardList.length === 0 && !isLoading" class="empty-state">
				<image 
					src="/static/images/no-data.svg" 
					mode="aspectFit" 
					class="empty-image"
				></image>
				<text class="empty-text">暂无仪表盘数据</text>
			</view>
			
			<!-- 有数据时显示列表 -->
			<template v-else>
				<!-- 卡片列表区域 -->
				<view class="card-grid">
					<view class="card-item" v-for="(item, index) in cardList" :key="index">
						<view class="card-content" @tap="onclick(item)">
							<view class="image-wrapper">
								<image 
									class="card-image" 
									:src="item.image" 
									mode="aspectFit"
								></image>
							</view>
							<view class="divider"></view>
							<view class="title-wrapper">
								<text class="card-title">{{ item.title }}</text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 加载状态和无更多数据提示 -->
				<view class="list-footer">
					<view v-if="isLoading" class="loading-more">
						<text>加载中...</text>
					</view>
					<view v-if="!hasMore && cardList.length > 0" class="no-more">
						<text>没有更多数据了</text>
					</view>
				</view>
			</template>
		</scroll-view>
	</view>

</template>

<script>
import request from '@/utils/request.js'

export default {
	data() {
		return {
			cardList: [],
			page: 0,
			pageSize: 20,
			hasMore: true,
			isRefreshing: false,
			isLoading: false,
			isFirstLoad: true,
			searchText: '',
			searchTimer: null
		}
	},
	onLoad() {
		// 首次加载数据
		if (this.isFirstLoad) {
			this.fetchDashboardData()
			this.isFirstLoad = false
		}
	},
	methods: {
		// 获取仪表盘数据
		async fetchDashboardData(isRefresh = false) {
			if (this.isLoading) return
			try {
				this.isLoading = true
				const params = {
					pageSize: this.pageSize,
					page: this.page,
					textSearch: this.searchText,
					sortProperty: 'createdTime',
					sortOrder: 'DESC'
				}
				const result = await request.get(`/api/tenant/dashboards`, params)
				if (result && result.data) {
					// 过滤掉 mobileHide 为 true 的数据
					const filteredData = result.data.filter(item => !item.mobileHide)
					
					const newData = filteredData.map(card => ({
						...card,
						title: card.title || '',
						//image: card.image || '/static/images/dashboard-placeholder.svg'
						image: '/static/images/dashboard-placeholder.svg'
					}))

					if (isRefresh) {
						this.cardList = newData
					} else {
						this.cardList = [...this.cardList, ...newData]
					}
					// 根据过滤后的数据判断是否还有更多
					this.hasMore = result.hasNext && filteredData.length === result.data.length
				}
			} catch (error) {
				console.error('获取仪表盘列表失败：', error)
				uni.showToast({
					title: '获取仪表盘列表失败',
					icon: 'none'
				})
			} finally {
				this.isLoading = false
				if (isRefresh) {
					this.isRefreshing = false
					uni.stopPullDownRefresh()
				}
			}
		},
		
		// 组件销毁时清理创建的URL
		beforeDestroy() {
			// 清理所有创建的 blob URLs
			this.cardList.forEach(card => {
				if (card.imageUrl && card.imageUrl.startsWith('blob:')) {
					URL.revokeObjectURL(card.imageUrl)
				}
			})
		},
		
		// 下拉刷新
		async onRefresh() {
			// 防止重复刷新
			if (this.isRefreshing || this.isLoading) {
				return
			}
			
			this.isRefreshing = true
			this.page = 0 // 重置页码
			await this.fetchDashboardData(true)
		},
		
		// 上拉加载更多
		async loadMore() {
			// 防止重复加载
			if (!this.hasMore || this.isLoading || this.isRefreshing) {
				return
			}
			
			this.page++
			await this.fetchDashboardData()
		},

		// 点击卡片, 跳转至仪表盘
		onclick (item) {
			console.log("item", item)
			uni.navigateTo({
				url: '/pages/dashboard/dashboard?id=' + item.id.id
			});
		},

		// 搜索处理
		onSearch() {
			if (this.searchTimer) {
				clearTimeout(this.searchTimer)
			}
			this.searchTimer = setTimeout(() => {
				// 重置分页
				this.page = 0
				this.cardList = []
				this.hasMore = true
				this.fetchDashboardData(true)
			}, 300)
		},

		// 清除搜索
		clearSearch() {
			this.searchText = ''
			this.onSearch()
		}
	}
}
</script>

<style>
.home-container {
	min-height: 100vh;
	background-color: #f5f5f5;
}

.search-section {
	background-color: #fff;
	padding: 20rpx;
}

.search-box {
	display: flex;
	align-items: center;
	background-color: #f5f5f5;
	border-radius: 8rpx;
	padding: 16rpx 20rpx;
	position: relative;
}

.search-input {
	flex: 1;
	font-size: 28rpx;
	padding-right: 60rpx;
}

.clear-icon {
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	right: 20rpx;
	top: 50%;
	transform: translateY(-50%);
}

.scroll-container {
	height: 100%;  /* 恢复原始高度 */
}

.card-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
	padding: 20rpx;  /* 恢复原始内边距 */
}

.card-item {
	background-color: #ffffff;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	overflow: hidden;
	aspect-ratio: 1; /* 保持卡片为正方形 */
	position: relative; /* 添加相对定位 */
}

.card-content {
	position: absolute; /* 绝对定位以填充整个卡片 */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

/* 图片容器 */
.image-wrapper {
	flex: 1;
	padding: 30rpx 30rpx 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* 分割线 */
.divider {
	height: 2rpx;
	background-color: #f0f0f0;
	margin: 0; /* 移除左右边距 */
	width: 100%; /* 确保宽度占满 */
}

/* 标题容器 */
.title-wrapper {
	padding: 20rpx 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.card-title {
	font-size: 28rpx;
	color: #333;
	text-align: center;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
}

.empty-image {
	width: 240rpx;
	height: 240rpx;
	margin-bottom: 30rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}

.list-footer {
	width: 100%;
	padding: 20rpx 0;
}

.loading-more, 
.no-more {
	text-align: center;
	padding: 30rpx 0;
	color: #999;
	font-size: 24rpx;
}
</style>

